<template>
   <div>
      <div class="box-big">
          <van-sticky @scroll="fn(can)">
    <ul>
              <li @click="show(0)">心动七夕 <p :class="{active:currIdx==0}" v-show="isShow"></p></li>
             
              <li @click="show(1)">颜值水杯 <p :class="{active:currIdx==1}" v-show="isShow"></p></li>
          
              <li @click="show(2)">家居日用<p :class="{active:currIdx==2}" v-show="isShow"></p></li>
            
              <li @click="show(3)">冲调零食<p :class="{active:currIdx==3}" v-show="isShow"></p></li>
            
              <li @click="Chaopin"><a href="#" id="word4">更多&gt;</a></li>
          </ul>
           
          
    </van-sticky>

             <div class="content-box">
                
                  <div class="box111">
            <div class="smallbox" v-for="shop in shoplist" :key="shop.id" @click="goGoods(shop.id)">
                <div class="boxphoto">
                    <img :src="shop.goodsImg" >
                </div>
                <div class="contcent">
                    <table border="0" cellspacing="0">
                        <tr>
                            <td class="word9">{{shop.goodsName}}</td>
                        </tr>
                        <tr>
                            <td><span>￥{{shop.goodsLowPrice}}</span>&nbsp;&nbsp;<span style=" text-decoration:line-through;color:gray;font-size:0.12rem">￥{{shop.goodsHighPrice}}</span></td>
                        </tr>
                        <tr>
                            <td><span>赠品</span></td>
                        </tr>
                        <tr>
                            <td>已售卖{{shop.saleNumber}}件<span class="iconfont icon-qicheqianlian-1-copy"></span>
</td>
                            
                        </tr>
                    </table>
                </div>
            </div> 
             <div class="smallbox" v-for="shop in shoplist" :key="shop.id"
             @click="goGoods(shop.id)">
                <div class="boxphoto">
                    <img :src="shop.goodsImg" >
                </div>
                <div class="contcent">
                    <table border="0" cellspacing="0">
                        <tr>
                            <td class="word9">{{shop.goodsName}}</td>
                        </tr>
                        <tr>
                            <td><span>￥{{shop.goodsLowPrice}}</span>&nbsp;&nbsp;<span style=" text-decoration:line-through;color:gray;font-size:0.12rem">￥{{shop.goodsHighPrice}}</span></td>
                        </tr>
                        <tr>
                            <td><span>赠品</span></td>
                        </tr>
                        <tr>
                            <td>已售卖{{shop.saleNumber}}件<span class="iconfont icon-qicheqianlian-1-copy"></span>
</td> 
                        </tr>
                    </table>
                </div>
            </div>

             <div class="smallbox" v-for="shop in shoplist" :key="shop.id"
             @click="goGoods(shop.id)">
                <div class="boxphoto">
                    <img :src="shop.goodsImg" >
                </div>
                <div class="contcent">
                    <table border="0" cellspacing="0">
                        <tr>
                            <td class="word9">{{shop.goodsName}}</td>
                        </tr>
                        <tr>
                            <td><span>￥{{shop.goodsLowPrice}}</span>&nbsp;&nbsp;<span style=" text-decoration:line-through;color:gray;font-size:0.12rem">￥{{shop.goodsHighPrice}}</span></td>
                        </tr>
                        <tr>
                            <td><span>赠品</span></td>
                        </tr>
                        <tr>
                            <td>已售卖{{shop.saleNumber}}件<span class="iconfont icon-qicheqianlian-1-copy"></span>
</td>        
                        </tr>
                    </table>
                </div>
            </div>

        </div>
            </div>
        </div>
      
      </div>
   
</template>
<script>
import axios from "axios";
import Vue from 'vue';
import { Sticky } from 'vant';
Vue.use(Sticky);

export default {
     name:"Main",
     data(){
         return{
             currIdx:0,
             isShow:true,
             can:{
             scrollTop: 0,
             isFixed: false
             },
             shoplist:[],
             Dex:[4,5,6,7]
        }
    },
    created(){
    this.getIdx(this.Dex[0]);
    },

     methods: {
         show(index){
             this.currIdx = index;
             this.getIdx(this.Dex[index]);
         },
         Chaopin(){
          this.$router.push("/Chaopin")
        }, 
        fn(){
              this.can.isFixe=true
            },
       
       getIdx(a){
            axios({
                url:"/api/goods/findGoodsByType",
                params:{
                    typeId:a
                } 
            })
            .then(res=>{
                console.log(res.data,'res.data');
                this.shoplist = res.data.data;
            })
        },
        goGoods(shopid){
            this.$router.push("/Goods/"+shopid)
          }
          } 
          }
</script>
<style scoped>
.box-big{
    width: 3.6rem;
    height: 2.83rem;
    /* background-color: pink; */
    margin: auto;
}
.box-big ul{
    display: flex;
    justify-content: space-between;
    background-color:white ;
}
.box-big ul li{
    width:0.55rem;
    height:0.15rem;
    /* background-color: aqua; */
    text-align: center;
    margin-top: 0.17rem;
    line-height:0.15rem ;
    margin-right: 0.2rem;
    position: relative;
}
.box-big ul li {
     font-size: 0.12rem;
    color: black;
}
.box-big ul li a{
    font-size: 0.12rem;
    color: black;
}
.box-big #word4{
    color: gray;
    font-size: 0.1rem;
}
.box-big ul .active{
    width: 0.25rem;
    height: 0.02rem;
    position: absolute;
    background-color: red;
    border-radius: 0.05rem;
    bottom: -0.06rem;
    left: 0.14rem;
   
   
 
}
.content-box{
   width: 3.6rem;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   margin: auto;
   justify-content: space-between;
   margin-bottom: 0.52rem;
}

.box111{
   width: 3.6rem;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   margin: auto;
   margin-bottom: 0.52rem;
   margin-top: 0.08rem;
   justify-content: space-between;
   padding-left:0.07rem ;
}
.box111 .smallbox{
    width: 1.76rem;
    height: 2.3rem;
    margin-bottom: 0.2rem;
}
.box111 .smallbox .boxphoto{
    height: 1.3rem;
    width: 1.76rem;
 
}
.box111 .smallbox .boxphoto img{
    width: 100%;
    height: 100%;
}
.box111 .smallbox .contcent{
    width:1.76rem;
    height: 1rem;
}
table tr {
    width: 1.76rem;
    height: 0.27rem;
    float: left;
    text-indent: 0.03rem;
}
table tr:nth-child(1) td{
    font-size: 0.1rem;
    font-weight: bold;
 
}
.word9{
    text-align: left;
}
table tr:nth-child(2) td span{
    font-size: 0.16rem;
    color: orange;
}
table tr:nth-child(3) td{
    width: 0.35rem;
    height: 0.13rem;
    background-color:#fde6df;
    font-size: 0.14rem;
    color: orange;
}

table tr:nth-child(4) td{
    font-size: 0.12rem;
    color: gray;
}
table tr:nth-child(4) td span:nth-child(1){
    display: inline-block;
    width: 0.2rem;
    height: 0.22rem;
    border-radius: 50%;
    background-color:orange ;
    margin-left:0.5rem ;
    text-align: center;
    line-height: 0.22rem;
}
.icon-qicheqianlian-1-copy{
    color: white;
    text-align: center;
}
</style>